<template>
  <div>
    <el-card>
      <el-table :data="allData">
        <el-table-column type="index" label="序号" />
        <el-table-column prop="username" label="姓名" />
        <el-table-column prop="workNumber" label="工号" />
        <el-table-column prop="departmentName" label="部门" />
        <el-table-column prop="mobile" label="手机" />
        <el-table-column
          v-for="(item,index) in dateData"
          :key="index"
          :label="item"
          prop="attendanceRecord"
        >
          <template #default="{row}">{{ row.attendanceRecord[index].adtStatu | formatterAttendanceRecord }}</template>
        </el-table-column>
      </el-table></el-card>
  </div>
</template>
<script>
import { getAttendancesListMock } from '@/api/attendances'
import attendanceEnum from '@/api/constant/attendance'
export default {
  components: {},
  filters: {
    formatterAttendanceRecord(val) {
      // 这里的item是枚举那边的那个id，是字符串来的，我们要的是数值
      const obj = attendanceEnum.holidayType.find(item => Number(item.id) === val)
      return obj ? obj.value : ''
    }
  },
  props: {},
  data() {
    return {
      allData: [],
      dateData: []

    }
  },
  async  created() {
    await this.getAllData()
    this.getDateData()
  },
  methods: {

    // 获取日期数据
    getDateData() {
      let dateData = this.allData[0].attendanceRecord
      dateData = dateData.map(item => {
        return item.day
      })
      // 切割日期
      this.dateData = dateData.map(item => {
        return item.toString().slice(4, 6) + '/' + item.toString().slice(6, 8)
      })
    },
    async getAllData() {
      // 获取所有数据
      const resMock = await getAttendancesListMock()
      console.log(resMock)
      this.allData = resMock.rows
    }

  }
}
</script>

<style scoped lang="less">

</style>
